<!DOCTYPE html>
<%@page import="com.cn.ccp.bean.UserBean"%>
<%@page import="com.cn.ccp.util.Contants"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="com.cn.ccp.bean.MenuBean"%>
<%@page import="java.util.Map"%>
<%@page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

	%>
<html>
<head>
<meta charset="utf-8">
<title>Online Education</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
		
		 <!-- styles -->
	    <link href="<%=basePath%>/css/bootstrap.css" rel="stylesheet">
	    <link href="<%=basePath%>/css/bootstrap.min.css" rel="stylesheet">
	    <link href="<%=basePath%>/css/bootstrap-responsive.css" rel="stylesheet">
	    <link href="<%=basePath%>/css/custom.css" rel="stylesheet">
	    <link href="<%=basePath%>/css/font-awesome.min.css" rel="stylesheet">
	       
	    <!-- Fav and touch icons -->
	    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%=basePath%>/images/icon/apple-touch-icon-144-precomposed.png">
	    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<%=basePath%>/images/icon/apple-touch-icon-114-precomposed.png">
	    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<%=basePath%>/images/icon/apple-touch-icon-72-precomposed.png">
	    <link rel="apple-touch-icon-precomposed" href="<%=basePath%>/images/icon/apple-touch-icon-57-precomposed.png">
	    <link rel="shortcut icon" href="<%=basePath%>/images/icon/favicon.png">
		
		<script type="text/javascript">
			
			 
		</script>
	<body >
		<div id="mainContenstDiv" >
	    	<div class="row" >
	        	<div class="span3"  id="sidebar">
	            	<div class="sidebar-item" style="height:100%;position:relative;bottom:0;width=80%;">
	            	<%
						UserBean users = (UserBean) session.getAttribute(Contants.USER_SESSION_BEAN);
						String userName = users.getUserName() ;
						String userTypeName = users.getUserTypeName();
						String specialtyName = users.getSpecialtyName();
						specialtyName = specialtyName != null ? specialtyName : "";
						String image = null;
						if(users.getImage() != null && !"".equalsIgnoreCase(users.getImage().trim()))
							image = "tempfile/"+users.getId()+"/head-image.png" ;
						else
							image = "images/teacher.png";
						//List<MenuBean> menuList = (List<MenuBean>)session.getAttribute("userMenu");
					%>
		            	<div class="media profile">
		                    <div class="media-thumb media-left">
		                        <a class="img-shadow" href="javascript:void(0);">
		                        	<img class="thumb" src="<%=image%>">
		                        </a>
		                    </div>
		                    <div class="media-body" style="margin-top: 20px;">
		                        <h4 class="media-heading">
									<%=userName%> 
		                        </h4>
		                        <span><%=specialtyName%></span><br />
		                    	<span><%=userTypeName%></span>
		                    </div>
		                </div>
		                
							 
						<!--Sidebar content-->
						<div class="sidebar-menu" id="menuNav">
						
							<%
								Map<MenuBean ,List<MenuBean> > menuMap = (Map<MenuBean ,List<MenuBean> >)session.getAttribute(Contants.USER_SESSION_MENU);
								Iterator<MenuBean> iters = menuMap.keySet().iterator();
								String parentMenu = "parentMenu";
								int i = 0;
								while(iters.hasNext()){
									MenuBean mbean = iters.next();
									
									String cls = "icon "+mbean.getImage();
									if(menuMap.get(mbean).size() > 0){
										parentMenu = parentMenu + i++;
										%>
										<a href="#<%=parentMenu %>" class="nav-header menu-first collapsed" data-toggle="collapse"><i class="<%=cls %>" style="margin-left:17px" ></i> <%=mbean.getMenuName() %></a>
										<ul id="<%=parentMenu %>" class="nav nav-list collapse menu-second">
											<%
												List<MenuBean> mList = menuMap.get(mbean);
												for(MenuBean m : mList){
													String mCls = "icon "+m.getImage();
													%>
													<li><a href="<%=m.getLink() %>" target="contentsPages"><i class="<%=mCls %>"></i><%=m.getMenuName() %></a></li>
													<%
												}
											%>
										</ul>
										<%
									}else{
										%>
										<a href="<%=mbean.getLink() %>" class="nav-header menu-first collapsed"  target="contentsPages" ><i class="<%=cls%>" style="margin-left:17px"></i> <%=mbean.getMenuName() %></a>
										<%
									}
								}
							%>					
						</div>
	                	
	                </div>
	            </div>
	        </div>
	    </div>
	    <script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<!--[if IE 6]>    
		  <link href="css/ie6.css" rel="stylesheet">
		  <script src="js/ie6.js"></script>
		<![endif]-->
		<script>
		$(function(){
			
			//这部分是布局框架，必须最后加载！
		     windowResize();
		     $(window).resize(function() {
		     	windowResize();
		     });
		     
		});
		function windowResize(){     
			if(768>=$(window).width()){
				$('#main').css('height','auto');
			}else{
				var h2=$('#header').height() || $('#header').outerHeight(true);
				var h1=$('#footer').height() || $('#footer').outerHeight(true); ;
				var h3=$(window).height() || $(document.body).outerHeight(true);
				var h= h3 - h1 - h2;
				$('#main').css('height','auto');
				$('#content').css('height','100%');
				$('#sidebar').css('height','100%');
				if($('#sidebar').height() >= h){
					if($('#sidebar').height() >= $('#content').height()){
						$('#main').css('height',$('#sidebar').height());
					}else{
						$('#main').css('height',$('#content').height());
					}
				}else if($('#content').height()>= h){
					if($('#sidebar').height() >= $('#content').height()){
						$('#main').css('height',$('#sidebar').height());
					}else{
						$('#main').css('height',$('#content').height());
					}
				}else{
					$('#content').css('height','100%');
					$('#sidebar').css('height','100%');
					$('#main').css('height','auto');
					$('#main').css('height',h);
				}
			
			}
		}
		</script>
	</body>
</html>
